<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>todo list</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.list-cont {
				width: 60vw;
				height: 50vh;
				overflow: auto;
			}

			.list-head {
				width: 100%;
				height: 32px;
				text-align: center;
				line-height: 32px;
				font-weight: bold;
				margin-bottom: 12px;
			}

			.list-add-container {
				width: 100%;
				height: 32px;
				margin-bottom: 12px;
				padding: 0 16px;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.list-add-container-inp {
					width: 240px;
					height: 100%;
					border: 1px solid #ccc;
					border-radius: 4px;
					padding-left: 6px;
					font-size: 12px;
					margin-right: 6px;

					&::placeholder {
						font-size: 12px;
						color: #ccc;
					}
				}

				.list-add-container-btn {
					width: 40px;
					height: 26px;
					cursor: pointer;
					background-color: transparent;
					outline: none;
					border: 1px solid transparent;
					border-radius: 2px;
					text-align: right;

					&:hover {
						color: blue;
					}
				}
			}

			.list-body {
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 12px;
			}

			.list-item {
				width: 100%;
				height: 40px;
				display: flex;
				align-items: center;
				padding: 0 16px;
				border: 1px solid #ccc;
				/* background-color: #ccc; */
				border-radius: 6px;
				cursor: pointer;
			}

			.list-item-inp-checkbox {
				width: 16px;
				height: 16px;
				outline: none;
				cursor: pointer;
				margin-right: 6px;
			}

			.list-item-text {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
			}

			.list-item-del {
				width: 80px;
				height: 26px;
				cursor: pointer;
				background-color: transparent;
				outline: none;
				border: 1px solid transparent;
				/* border: 1px solid red; */
				color: rgb(246, 44, 44);
				border-radius: 2px;
				text-align: right;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="list-cont">
				<div class="list-head">待办事项</div>

				<div class="list-add-container">
					<input
						class="list-add-container-inp"
						type="text"
						placeholder="新增待办事项"
						name=""
						id=""
					/>
					<button class="list-add-container-btn">
						添加
					</button>
				</div>

				<div class="list-body">
					<!-- <div class="list-item">
          <input class="list-item-inp-checkbox" type="checkbox" name="" id="">
          <div class="list-item-text">
            吃饭
          </div>
          <button class="list-item-del">删除</button>
        </div> -->
				</div>
			</div>
		</div>

		<script>
			// 基础数据
			const initials = [
				{
					label: '吃饭',
					// finished 代表完成 unfinished 代表未完成
					status: 'unfinished',
					// true 是未删除 false 是已删除
					state: true
				},
				{
					label: '睡觉',
					status: 'unfinished',
					state: true
				},
				{
					label: '学习',
					status: 'unfinished',
					state: true
				}
			];

			// 添加到页面
			const container =
				document.querySelector('.list-body');

			// 处理删除
			const handleDelete = (event) => {
				const id = event.target.dataset.id;
				if (!id) return;
				const newList = initials.filter(
					(v) => v.id !== +id
				);
				render(newList);
			};

			// 根据数据生成页面
			function render(initial = initials) {
				// 先给每一条数据添加一个 id
				initial.forEach((item, index) => {
					item.id = index;
				});
				const temp = initial.map((item) => {
					return `<div class="list-item" data-id=${item.id}>
                  <input class="list-item-inp-checkbox" type="checkbox">
                  <div class="list-item-text">
                    ${item.label}
                  </div>
                  <button class="list-item-del" data-id=${item.id}>删除</button>
                </div>`;
				});
				const temps = temp.join('');
				container.innerHTML = temps;
				// 获取所有 list-item-del
				const del_items = document.querySelectorAll(
					'.list-item-del'
				);
				if (!del_items.length) return;
				del_items.forEach((item) => {
					item.addEventListener(
						'click',
						handleDelete
					);
				});
			}

			// init
			render();

			const add_input = document.querySelector(
				'.list-add-container-inp'
			);

			const add_button = document.querySelector(
				'.list-add-container-btn'
			);

			add_button.addEventListener('click', () => {
				const value = add_input.value.trim();
				if (value) {
					const todo_item = {
						label: value,
						status: 'unfinished',
						state: true
					};
					initials.push(todo_item);
					// 清空输入框
					add_input.value = '';
					// 重新渲染
					render();
				} else {
					alert('请输入');
				}
			});
		</script>
	</body>
</html>
